<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">

    <div class="layui-form-item">
        <label class="layui-form-label">pod存活探测</label>
        <div class="layui-input-block">
            <select name="probe" id="probe" lay-filter="probe">
                <option value="unknown">unknown</option>
                <option value="Command Probe">命令探针(Command Probe)：该探针类型会在容器中执行一个命令。如果该命令成功执行并且返回值为0，则认为该容器健康；否则，就认为它不健康。
                </option>
                <option value="HTTP Probe">HTTP 探针(HTTP Probe)：该探针类型会向容器中指定的 IP 地址和端口发送 HTTP请求。如果返回的 HTTP 状态码位于 200 到 399 之间，则认为该容器健康；否则，就认为它不健康
                </option>
                <option value="TCP Probe">TCP 探针(TCP Probe)：该探针类型会向容器中指定的 IP 地址和端口发送 HTTP 请求。如果返回的HTTP 状态码位于 200 到 399 之间，则认为该容器健康；否则，就认为它不健康
                </option>
            </select>
        </div>
    </div>

    <div class="layui-form-item" id="httpreadinessProbe-div">

        <div class="layui-inline" style=" min-width: 466px; ">
            <label class="layui-form-label">HTTP就绪检测路径</label>
            <div class="layui-input-block">
                <div class="layui-form" action="" lay-filter="httpreadinessProbe-form">
                    <div class="layui-form-item">
                        <div class="layui-inline" style=" min-width: 466px; ">
                            <label class="layui-form-label">协议</label>
                            <div class="layui-input-inline">
                                <select name="scheme">
                                    <option value="HTTP">HTTP
                                    </option>

                                    <option value="HTTPS">HTTPS
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline" style=" min-width: 466px; ">
                            <label class="layui-form-label">检测端口</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="number" step="1" style="width: 360px" name="portInt">
                            </div>
                        </div>
                        <div class="layui-inline" style=" min-width: 466px; ">
                            <label class="layui-form-label">检测路径</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" style="width: 360px" name="path">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="layui-form-item" id="httpLivenessProbe-div">

        <div class="layui-inline" style=" min-width: 466px; ">
            <label class="layui-form-label">HTTP运行检测路径</label>
            <div class="layui-input-block">
                <div class="layui-form" action="" lay-filter="httplivenessProbe-form">
                    <div class="layui-form-item">
                        <div class="layui-inline" style=" min-width: 466px; ">
                            <label class="layui-form-label">协议</label>
                            <div class="layui-input-inline">
                                <select name="scheme">
                                    <option value="HTTP">HTTP
                                    </option>

                                    <option value="HTTPS">HTTPS
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline" style=" min-width: 466px; ">
                            <label class="layui-form-label">检测端口</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="number" step="1" style="width: 360px" name="portInt">
                            </div>
                        </div>
                        <div class="layui-inline" style=" min-width: 466px; ">
                            <label class="layui-form-label">检测路径</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" style="width: 360px" name="path">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="layui-form-item" id="readinessProbe-div">
        <div class="layui-inline" style=" min-width: 466px; ">
            <label class="layui-form-label">就绪检测</label>
            <div class="layui-input-block">

                <div class="layui-form" action="" lay-filter="readinessProbe-form">

                    <div class="layui-form-item">
                        <div class="layui-inline" style=" min-width: 466px; ">
                            <label class="layui-form-label">响应超时时间</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="number" step="1" style="width: 360px"
                                       name="timeoutSeconds">
                            </div>
                        </div>
                        <div class="layui-inline" style=" min-width: 466px; ">
                            <label class="layui-form-label">初始等待(秒)</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="number" step="1" style="width: 360px"
                                       name="initialDelaySeconds">
                            </div>
                        </div>

                        <div class="layui-inline" style=" min-width: 466px; ">
                            <label class="layui-form-label">检测间隔</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="number" step="1" style="width: 360px"
                                       name="periodSeconds">
                            </div>
                        </div>
                        <div class="layui-inline" style=" min-width: 466px; ">
                            <label class="layui-form-label">成功次数</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="number" step="1" style="width: 360px"
                                       name="successThreshold">
                            </div>
                        </div>

                        <div class="layui-inline" style=" min-width: 466px; ">
                            <label class="layui-form-label">失败次数</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="number" step="1" style="width: 360px"
                                       name="failureThreshold">
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>

    </div>


    <div class="layui-form-item" id="livenessProbe-div">
        <div class="layui-inline" style=" min-width: 466px; ">
            <label class="layui-form-label">运行检测</label>
            <div class="layui-input-block">

                <div class="layui-form" action="" lay-filter="livenessProbe-form">


                    <div class="layui-form-item">
                        <div class="layui-inline" style=" min-width: 466px; ">
                            <label class="layui-form-label">响应超时时间</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="number" step="1" style="width: 360px"
                                       name="timeoutSeconds">
                            </div>
                        </div>
                        <div class="layui-inline" style=" min-width: 466px; ">
                            <label class="layui-form-label">初始等待(秒)</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="number" step="1" style="width: 360px"
                                       name="initialDelaySeconds">
                            </div>
                        </div>

                        <div class="layui-inline" style=" min-width: 466px; ">
                            <label class="layui-form-label">检测间隔</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="number" step="1" style="width: 360px"
                                       name="periodSeconds">
                            </div>
                        </div>
                        <div class="layui-inline" style=" min-width: 466px; ">
                            <label class="layui-form-label">成功次数</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="number" step="1" style="width: 360px"
                                       name="successThreshold">
                            </div>
                        </div>
                        <div class="layui-inline" style=" min-width: 466px; ">
                            <label class="layui-form-label">失败次数</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="number" step="1" style="width: 360px"
                                       name="failureThreshold">
                            </div>
                        </div>
                        <!--                        <div class="layui-inline" style=" min-width: 466px; ">-->
                        <!--                            <label class="layui-form-label">优雅关闭超时时间</label>-->
                        <!--                            <div class="layui-input-inline">-->
                        <!--                                <input class="layui-input" style="width: 360px" name="terminationGracePeriodSeconds">-->
                        <!--                            </div>-->
                        <!--                        </div>-->

                    </div>
                </div>

            </div>
        </div>

    </div>


    <div class="layui-form-item  ">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">保存</button>
        </div>
    </div>

</div>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../lib/js-yaml-4.1.0/js-yaml.js" charset="utf-8"></script>
<script src="../lib/highlight-11.7.0/highlight.js" charset="utf-8"></script>
<script src="../lib/highlight-11.7.0/languages/yaml.min.js" charset="utf-8"></script>
<script src="../lib/highlight-11.7.0/languages/json.min.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;
        window.$ = $

        $("#httpreadinessProbe-div").hide()
        $("#httpLivenessProbe-div").hide()

        $("#readinessProbe-div").hide()
        $("#livenessProbe-div").hide()

        const container = parent.deploy.containers[0]
        if (container.readinessProbe && container.readinessProbe.httpGet) {
            $("#probe").val('HTTP Probe')
            $("#httpreadinessProbe-div").show()
            $("#httpLivenessProbe-div").show()
            $("#readinessProbe-div").show()
            $("#livenessProbe-div").show()
            if (container.readinessProbe.httpGet) {
                $("div[lay-filter=httpreadinessProbe-form]").find('select[name="scheme"]').val(container.readinessProbe.httpGet.scheme)
                $("div[lay-filter=httpreadinessProbe-form]").find('input[name="portInt"]').val(container.readinessProbe.httpGet.portInt)
                $("div[lay-filter=httpreadinessProbe-form]").find('input[name="path"]').val(container.readinessProbe.httpGet.path)
            }

            $("div[lay-filter=readinessProbe-form]").find('input[name="timeoutSeconds"]').val(container.readinessProbe.timeoutSeconds)
            $("div[lay-filter=readinessProbe-form]").find('input[name="initialDelaySeconds"]').val(container.readinessProbe.initialDelaySeconds)
            $("div[lay-filter=readinessProbe-form]").find('input[name="periodSeconds"]').val(container.readinessProbe.periodSeconds)
            $("div[lay-filter=readinessProbe-form]").find('input[name="successThreshold"]').val(container.readinessProbe.successThreshold)
            $("div[lay-filter=readinessProbe-form]").find('input[name="failureThreshold"]').val(container.readinessProbe.failureThreshold)
        }
        if (container.livenessProbe && container.livenessProbe.httpGet) {
            $("#probe").val('HTTP Probe')
            $("#httpreadinessProbe-div").show()
            $("#httpLivenessProbe-div").show()
            $("#readinessProbe-div").show()
            $("#livenessProbe-div").show()
            if (container.livenessProbe.httpGet) {
                $("div[lay-filter=httplivenessProbe-form]").find('select[name="scheme"]').val(container.livenessProbe.httpGet.scheme)
                $("div[lay-filter=httplivenessProbe-form]").find('input[name="portInt"]').val(container.livenessProbe.httpGet.portInt)
                $("div[lay-filter=httplivenessProbe-form]").find('input[name="path"]').val(container.livenessProbe.httpGet.path)
            }

            $("div[lay-filter=livenessProbe-form]").find('input[name="timeoutSeconds"]').val(container.livenessProbe.timeoutSeconds)
            $("div[lay-filter=livenessProbe-form]").find('input[name="initialDelaySeconds"]').val(container.livenessProbe.initialDelaySeconds)
            $("div[lay-filter=livenessProbe-form]").find('input[name="periodSeconds"]').val(container.livenessProbe.periodSeconds)
            $("div[lay-filter=livenessProbe-form]").find('input[name="successThreshold"]').val(container.livenessProbe.successThreshold)
            $("div[lay-filter=livenessProbe-form]").find('input[name="failureThreshold"]').val(container.livenessProbe.failureThreshold)
        }

        form.render()

        form.on('select(probe)', function (data) {
            console.log(data)
            $("#httpreadinessProbe-div").hide()
            $("#httpLivenessProbe-div").hide()

            $("#readinessProbe-div").hide()
            $("#livenessProbe-div").hide()

            if (data.value === "HTTP Probe") {
                $("#httpreadinessProbe-div").show()
                $("#httpLivenessProbe-div").show()
                $("#readinessProbe-div").show()
                $("#livenessProbe-div").show()
            } else if (data.value === "TCP Probe") {
                layer.msg('暂不支持此种方式')
            } else {
                layer.msg('暂不支持此种方式')
            }

        });


        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let livenessProbe = {}
            livenessProbe.httpGet = {}
            livenessProbe.httpGet.scheme = $("div[lay-filter=httplivenessProbe-form]").find('select[name="scheme"]').val()
            livenessProbe.httpGet.portInt = $("div[lay-filter=httplivenessProbe-form]").find('input[name="portInt"]').val()
            livenessProbe.httpGet.path = $("div[lay-filter=httplivenessProbe-form]").find('input[name="path"]').val()
            livenessProbe.timeoutSeconds = $("div[lay-filter=livenessProbe-form]").find('input[name="timeoutSeconds"]').val()
            livenessProbe.initialDelaySeconds = $("div[lay-filter=livenessProbe-form]").find('input[name="initialDelaySeconds"]').val()
            livenessProbe.periodSeconds = $("div[lay-filter=livenessProbe-form]").find('input[name="periodSeconds"]').val()
            livenessProbe.successThreshold = $("div[lay-filter=livenessProbe-form]").find('input[name="successThreshold"]').val()
            livenessProbe.failureThreshold = $("div[lay-filter=livenessProbe-form]").find('input[name="failureThreshold"]').val()


            let readinessProbe = {}
            readinessProbe.httpGet = {}
            readinessProbe.httpGet.scheme = $("div[lay-filter=httpreadinessProbe-form]").find('select[name="scheme"]').val()
            readinessProbe.httpGet.portInt = $("div[lay-filter=httpreadinessProbe-form]").find('input[name="portInt"]').val()
            readinessProbe.httpGet.path = $("div[lay-filter=httpreadinessProbe-form]").find('input[name="path"]').val()
            readinessProbe.timeoutSeconds = $("div[lay-filter=readinessProbe-form]").find('input[name="timeoutSeconds"]').val()
            readinessProbe.initialDelaySeconds = $("div[lay-filter=readinessProbe-form]").find('input[name="initialDelaySeconds"]').val()
            readinessProbe.periodSeconds = $("div[lay-filter=readinessProbe-form]").find('input[name="periodSeconds"]').val()
            readinessProbe.successThreshold = $("div[lay-filter=readinessProbe-form]").find('input[name="successThreshold"]').val()
            readinessProbe.failureThreshold = $("div[lay-filter=readinessProbe-form]").find('input[name="failureThreshold"]').val()


            const probeType = $("#probe").val()
            console.log(readinessProbe, livenessProbe, probeType)
            const obj = {readinessProbe, livenessProbe, probeType}

            $.ajax({
                type: "POST",
                url: `../deploy/updateProbe/default/${parent.deploy.name}` + '?k8sId=' + parent.k8sId + '&probeType=' + probeType,

                traditional: true,
                data: JSON.stringify(obj),
                contentType: "application/json",
                async: false,
                success: (result) => {
                    if (result.code === 10000) {
                        parent.layer.msg('发送成功')
                    } else {
                        parent.layer.msg(result.msg)
                    }

                    var iframeIndex = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(iframeIndex);
                    return false;

                }
            });


            return false;
        });


    });
</script>
</body>
</html>
